<template>
  <div>
    <h2>求和: {{ sum }}</h2>
    <button @click="sum++">add sum</button>
  </div>
  <div>
    <h2>修改: {{ num }}</h2>
    <input type="text" v-model="num">
  </div>
  <div>
    <h2>修改: {{ person.name }} - {{ person.age }} - {{ person.job.j1.salary }}</h2>
    <input type="text" v-model="person.name">
    <input type="number" v-model="person.age">
    <input type="number" v-model="person.job.j1.salary">
  </div>
</template>

<script>
import { ref, reactive, computed, watch } from 'vue'
export default {
  name: 'sum',
  setup() {
    const sum = ref(0)
    const num = ref('99个')
    const person = reactive({
      name: 'jack',
      age: 18,
      job: {
        j1: {
          salary: 20
        }
      }
    })
    // 在使用ref定义一个对象类型的时候，resimpl里面的value是一个对象，不在是一个基本类型的值，除非更改对象存储地址或者替换对象
    // 不然无法使用watch直接监听，
    // 需要.value在监听, 在这种情况不在是监视ref定义的数据而是ref里面求助的reactive的数据, 
    // 或者开启deep深度监视
    // watch(sum, (val, old) => {
    //   console.log(val, old)
    // })
    // watch([sum, num], (val, old) => {
    //   console.log(val, old)
    // }, { immediate: true })
    // watch(person, (val, old) => {
    //   console.log(val, old)
    // }, { deep: false }) // deep无效
    // watch(() => person.name, (val, old) => {
    //   console.log(val, old)
    // })
    // watch([() => person.name, () => person.age], (val, old) => {
    //   console.log(val, old)
    // })
    // watch(() => person.job, (val, old) => {
    //   console.log(val, old)
    // }, { immediate: true, deep: true })
    return {
      sum,
      num,
      person
    }
  }
}
</script>

<style>

</style>